<template>
    <div id="container">
        <div id="viewDiv"></div>
        <el-main style="position:absolute;left:10x;top:10px;width:400px;background-color:white" oncontextmenu="return false">
            <div style="width:100%;margin-bottom:10px;">
                <el-button type="danger" @click="click('删除选择结果')">删除选择结果</el-button>
                <el-button type="success" @click="click('框选范围')">框选范围</el-button>
            </div>
            <div id="viewDiv_" style="position:relative;width:100%;height:300px;">
                <div style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0)"></div>
            </div>
        </el-main>
   </div>
</template>
   
<script setup>
    import {onMounted} from 'vue'
    import * as 天地图 from '../天地图'
    import {ElMessageBox} from 'element-plus'
    import Map from '@arcgis/core/Map'
    import MapView from '@arcgis/core/views/MapView'
    import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
    import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel'
    import * as queryClass from '@arcgis/core/rest/query'
    import Query from '@arcgis/core/rest/support/Query'
    import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
    var 查询结果要素图层,map1,map2,view1,view2,sketchViewModel,query,graphicsLayer,框选中心
    var sync=()=>{}
    var queryURL="https://ws8575.club/web/rest/services/Hosted/要素图层发布测试_前端渲染测试_3857/FeatureServer/0"
    const click=(event)=>{
        switch(event){
            case "删除选择结果":
                if(查询结果要素图层){//清空上一次的查询结果
                    map1.remove(查询结果要素图层)//map中的图层并非引用,而是存储了一个完整的副本
                    graphicsLayer.graphics.removeAll()
                    查询结果要素图层=null
                }else{
                    ElMessageBox.alert("您还没有查询过图层!","警告",{
                        type:"warning"
                    })
                }
                break
            case "框选范围"://点击"框选范围"按钮,绘制查询几何
                graphicsLayer.graphics.removeAll()//先清除先前的查询范围矩形
                sketchViewModel.create('rectangle',{
                    mode:'freehand'
                })
                break
        }
    }
    onMounted(()=>{
        graphicsLayer=new GraphicsLayer()
        map1=new Map({
            basemap:{
                baseLayers:天地图.天地图矢量_无标注
            }
        })
        map2=new Map({
            basemap:{
                baseLayers:天地图.天地图影像
            },
            layers:[graphicsLayer]
        })
        view1=new MapView({
            map:map1,
            container:"viewDiv",
            center:[120.4,36.1],
            zoom:12,
            constraints:{
                rotationEnabled:false,
                maxScale:2000
            }
        })
        view2=new MapView({
            map:map2,
            container:"viewDiv_",
            center:[120.4,36.1],
            zoom:10,
        })
        view1.ui.remove(["zoom","attribution"])
        view2.ui.remove(["zoom","attribution"])
        sync = () => {
            var viewpoint=view1.viewpoint.clone()//必须使用clone()方法否则将引用
            viewpoint.scale=500000
            view2.viewpoint=viewpoint
        }
        view1.watch(["interacting", "animation","viewpoint"], () => {
            sync()
        })
        query=new Query({//创建查询参数对象,设置返回几何属性,并返回属性表中的name字段和address字段
            returnGeometry:true,
            outFields:["name","address"]
        })
        sketchViewModel=new SketchViewModel({
            view:view1,
            layer:graphicsLayer
        })
        sketchViewModel.on("create",(event)=>{//绘制图形完成事件的回调函数
            if(event.state==="complete"){
                框选中心=event.graphic.geometry.centroid//获取绘制的矩形的几何中心点几何,用于执行goTo()方法,
                query.geometry=event.graphic.geometry//将矩形范围几何作为查询对象的范围几何
                queryClass.executeQueryJSON(queryURL,query).then((featureSet)=>{//利用url地址和查询对象执行查询,查询将返回featureSet对象
                    map1.remove(查询结果要素图层)//清空上一次查询的结果
                    查询结果要素图层=new FeatureLayer({//实例化一个新的要素图层,将查询到的图形集合传递给要素图层的source属性
                        fields:[
                            {name:'name',alias:'名称',type:'string'},
                            {name:'address',alias:'地址',type:'string'},
                        ],
                        geometryType:'point',
                        objectIdField:'objectid',
                        title:'查询结果',
                        source:featureSet.features,
                        renderer:{
                            type:'simple',
                            symbol:{
                                type:"simple-marker",
                                color:[50,50,200],
                                size:13,
                                outline:{
                                    color:[255,255,255],
                                    width:1
                                }
                            }

                        },
                        labelingInfo:[{
                            labelExpressionInfo:{
                                expression:`$feature.name`
                            },
                            minScale:30000,
                            symbol:{
                                type:'text',
                                font:{
                                    size:12
                                },
                                color:[50,50,200],
                                haloColor:[255,255,255],
                                haloSize:1
                            },
                            labelPlacement:'center-right'
                        }]
                    })
                    map1.add(查询结果要素图层)
                    view1.goTo({
                        target:框选中心,
                        zoom:15
                    },{
                        duration:1500
                    })
                })
            }
        })

    })
</script>

<style scoped>
#container,#viewDiv{
  width:100%; height:100%; padding:0;margin:0;
}
</style>
